// FadeInView.js
import React, { Component } from 'react';
import {
    Animated,
    Easing,
} from 'react-native';

export default class RotateView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rotation: new Animated.Value(0),
            fadeAnim: new Animated.Value(0),          // 透明度初始值设为0
        };
    }
    componentDidMount() {
        let timing = Animated.timing;
        Animated.parallel(['fadeAnim', 'rotation'].map(property => {
            return timing(this.state[property], {
                toValue: 1,
                duration: 60000,
                easing: Easing.linear,
                // easing: Easing.back,
            });
        })).start();

        // Animated.timing(                            // 随时间变化而执行的动画类型
        //     this.state.fadeAnim,                      // 动画中的变量值
        //     {
        //         toValue: 1,                             // 透明度最终变为1，即完全不透明
        //     }
        // ).start();                                  // 开始执行动画
    }
    render() {
        return (
            <Animated.View
                style={{
                    opacity: this.state.fadeAnim.interpolate({
                        inputRange: [0,1],
                        outputRange: [1, 0]
                    }),           // Binds
                    transform: [{
                        rotateZ: this.state.rotation.interpolate({
                            inputRange: [0,1],
                            outputRange: ['0deg', '21600deg']
                        })
                    }]
                }}>
                {this.props.children}
            </Animated.View>
        );



        // return (
        //     <Animated.View                            // 可动画化的视图组件
        //         style={{
        //             opacity: this.state.fadeAnim,          // 将透明度指定为动画变量值
        //         }}>
        //         {this.props.children}
        //     </Animated.View>
        // );
    }
}